<template>
	<view class="ynq-Location">

		<!-- 字母区域 -->
		<view class="ynq-Letter">
			<view hover-class="Click-Latter">#</view>
			<view hover-class="Click-Latter">热</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)">{{l}}</view>
		</view>
		
		<view class="top">
			<view class="left">
				<view class="text">
					北京
				</view>
				<uni-icons class="icon" type="top"></uni-icons>
			</view>
			<view class="right">
				取消
			</view>
		</view>
		<view class="neck">
			<view class="location-city">
				<view class="text">
					当前定位城市
				</view>
				<view class="content">
					<view class="left">
						<uni-icons class="icon" type="location-filled" size="30"></uni-icons>
						<view class="text">北京</view>
					</view>
					<view class="right">
						重新定位
					</view>
				</view>
			</view>
			<view class="scan-city">
				<view class="text">
					历史浏览城市
				</view>
				<view class="content">
					<view class="text">
						北京
					</view>
				</view>
			</view>
		</view>

		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<!-- 热门城市 -->
			<view class="ynq-HotCity" id="ScrollTop">
				<view class="ynq-HotCityTitle">
					<text class="ynq ynq-fire"></text>
					<text>热门城市</text>
				</view>

				<view class="ynq-HotCityList">
					<text class="radius-3" @tap="getStorage(item)" v-for="(item,index) in HotCity"
						:key="index">{{item}}</text>
				</view>
			</view>
		
			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<block v-for="(item,index) in CityList" :key="index">
					<view class="ynq-CityLetter" :id="item.initial">{{item.initial}}</view>
					<view class="ynq-CityLine">
						<text @tap="getStorage(item_city.name)" v-for="(item_city,name_index) in item.list"
							:key="name_index">{{item_city.name}}</text>
					</view>
				</block>
			</view>
		</scroll-view>

	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {cityData} from '../../../common/jsdata/city.js' 
	// var cityData = require('@/common/json/city.json')
	
	const citylists = ref([])
	const cityname = ref([])
	const keywprd = ref("")
	const cityName = ref("")
	const HotCity = ref(['北京',  '上海', '广州','深圳','成都', '重庆', '杭州', '苏州', '沈阳', '武汉'])
	const LatterName = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S','T', 'U', 'V', 'W', 'X', 'Y', 'Z'])
	const CityList = ref(cityData.city)
	const LetterId = ref('')
	
	// 定位
	//获取定位
	function getLocations() {
		let that = this;
		uni.getLocation({
			type: 'gcj02',
			geocode: true,
			success(res) {
	
				let lat = res.latitude;
				let lng = res.longitude;
	
	
				let key =
					'P7PBZ-BPXED-DJE4X-PTPBI-W7LXF-XMBBY'; //申请地址：https://lbs.qq.com/dev/console/application/mine
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng +
						'&key=' + key,
					method: "GET",
					success(ress) {
						let data = ress.data; //获取到所有定位的数据
						that.CityName = ress.data.result.address_component.city;
						console.log("位置信息", that.CityName);
						console.log(ress)
						uni.setStorage({
							key: 'City_Name',
							data: that.CityName
						})
					},
	
					fail() {
						uni.showToast({
							'title': '对不起，数据获取失败！',
							'icon': 'none'
						})
					}
				})
			},
			fail(res) {
				uni.showToast({
					'title': '对不起，获取位置失败！',
					'icon': 'none'
				})
			}
	
		})
		uni.navigateBack({
			url: '/pages/index/index'
		})
	}
	
	//获取定位点
	function getLetter(name) {
		this.LetterId = name
		uni.pageScrollTo({
			selector: '#' + name,
			duration: 300
		})
	}
	//存储城市缓存
	function getStorage(Name) {
		uni.setStorage({
			key: 'City_Name',
			data: Name
		})
		this.CityName = Name
		//跳转返回
		uni.navigateBack()
	}	
	
	
	function onShow() {
		let _that = this;
		setTimeout(function() {
			uni.getStorage({
				key: 'City_Name',
				success(res) {
					_that.CityName = res.data
				}
			})
		}, 1000)
	}
	function onLoad() {
		
	}
	
</script>

<style lang="scss" scoped>
	
	.top {
		margin-top: 10rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 60rpx;
		color: #a5a5a5;
		.left {
			position: relative;
			display: flex;
			gap: 25rpx;
			.text {
				
			}
			.icon {
				
			}
		}
		.right {
			
		}
		&::after {
			position: absolute;
			bottom: 0;
			display: block;
			content: '';
			background-color: #f8f8f8;
			width: 100%;
			height: 1rpx;
		}
		
	}
	.neck {
		display: flex;
		flex-direction: column;
		padding-top: 30rpx;
		.location-city {
			&>.text {
				background-color: #f6f7fb;
				height: 80rpx;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				color: #adb2b9;
			}
			.content {
				padding: 0 20rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 10rpx;
					.icon {
						
					}
					.text {
						
					}
				}
				.right {
					color: steelblue;
				}
			}
		}
		.scan-city {
			&>.text {
				background-color: #f6f7fb;
				height: 80rpx;
				display: flex;
				align-items: center;
				padding-left: 40rpx;
				color: #adb2b9;
			}
			.content {
				height: 100rpx;
				display: flex;
				align-items: center;
				padding-left: 100rpx;
				.text {
					
				}
			}
		}
	}
	
	

	.ynq-Location {
		height: 100vh;
		padding: 0 10rpx;
	}

	.ynq-AutoLocation {
		width: calc(100% - 40rpx);
		background: rgba(250, 250, 250, .5);
		padding: 20rpx 20rpx;

		text.ynq {
			font-size: 32rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 30rpx;
		}
	}

	.ynq-HotCityTitle {
		padding: 0rpx 10rpx;
		background-color: #f6f7fb;
		height: 70rpx;
		padding-left: 30rpx;
		display: flex;
		align-items: center;
		text.ynq {
			margin-right: 10rpx;
			color: #ff0000;
			font-size: 32rpx;
		}

		text {
			font-size: 30rpx;
			color: #909090;
			
		}
	}

	.ynq-HotCityList {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		padding: 20rpx 0;
		text {
			height: 60rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			color: #767676;
			
		}
	}

	.ynq-Letter {
		position: fixed;
		right: 5rpx;
		top: 320rpx;
		width: 30rpx;
		z-index: 100;

		view {
			display: block;
			width: 30rpx;
			text-align: center;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 22rpx;
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}

	.ynq-CityList {
		padding: 0px 40rpx 0 20rpx;

		.ynq-CityLetter {
			line-height: 60rpx;
			height: 60rpx;
			font-size: 24rpx;
			border-bottom: 1px solid #f7f7f7;
			padding-left: 10rpx;
			color: #909090;
			background-color: #f6f7fb;
		}

		.ynq-CityLine {
			margin: 20rpx 0px;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			text {
				display: block;
				line-height: 60rpx;
				padding: 0px 10rpx;
				font-size: 30rpx;
				color: #767676;
				text-align: center;
			}
		}
	}

	.ynq-ScrollView {
		height: 700rpx;
	}

	.Click-Latter {
		font-size: 30rpx !important;
	}
</style>
